
@extends('layout.default')

@section('stylesheet')
<link href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap-daterangepicker/2.1.27/daterangepicker.min.css" rel="stylesheet">
@stop

@section('layout.content')
<form class="form-horizontal" id="product-create" autocomplete="off" enctype="multipart/form-data">
<input type="hidden" name="date_begin" value="" />
<input type="hidden" name="date_end" value="" />
<div class="row">
  <div class="col-md-8"><!-- left -->
    <div class="row">
      <div class="col-md-6"><!-- left 1 row -->
        <div class="form-group">
            <label class="col-sm-3 col-xs-12 control-label b" for="name"> <span class="red">*</span> 商品名称</label>
            <div class="col-sm-9 col-xs-12">
                <input type="text" class="form-control" name="name" placeholder="商品名称" />
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 col-xs-12 control-label b" for="title"> <span class="red">*</span> 简介</label>
            <div class="col-sm-9 col-xs-12">
                <textarea class="form-control" name="title" placeholder="商品简介"></textarea>
            </div>
          </div>
          <div class="form-group">
              <label class="col-sm-3 col-xs-12 control-label b"> <span class="red">*</span> 商品分类 </label>
              <div class="col-sm-9 col-xs-12">
                <div class="col-sm-6 col-xs-6" style="padding-left:0;">
                  <select class="form-control parent" name="parent_category" size="5">
                  </select>
                </div>
                <div class="col-sm-6 col-xs-6">
                  <select class="form-control child" name="category_id" size="5">
                  </select>
                </div>
              </div>
          </div>
          <div class="form-group">
              <label class="col-sm-3 col-xs-12 control-label b" for="shop"> <span class="red">*</span> 门店</label>
              <div class="col-sm-9 col-xs-12">
                  <input type="text" class="form-control" name="shop" placeholder="输入门店ID、名称或核销员手机号" />
              </div>
          </div>

          <h5 class="header smaller lighter green">图片</h5>
          <div class="form-group">
            <div class="col-sm-6 col-xs-12">
              <p class="align-center">商品缩略图</p>
              <a href="javascript:;" class="uploader-box thumbnail">
                <input class="uploader-input" id="cover_pic" name="cover_pic" type="file" accept="image/*">
                <img style="width: 100%;" src="/assets/images/plus.png">
              </a>
            </div>
            <div class="col-sm-6 col-xs-12">
              <p class="align-center">商品海报图</p>
              <a href="javascript:;" class="uploader-box thumbnail">
                <input class="uploader-input" id="share_pic" name="share_pic" type="file" accept="image/*">
                <img style="width: 100%;" src="/assets/images/plus.png">
              </a>
            </div>
          </div>

      </div><!-- left 1 row end -->

      <div class="col-md-6"><!-- left 2 row -->
        <h5 class="header smaller lighter blue">销售</h5>
        <div class="form-group">
          <label class="col-sm-3 col-xs-12 control-label b"> <span class="red">*</span> 价格</label>
          <div class="col-sm-2 col-xs-4" style="width: 110px;">
              <input type="number" min="0" step="0.01" class="form-control" name="origin" placeholder="原价" />
          </div>
          <div class="col-sm-2 col-xs-4" style="width: 110px;">
              <input type="number" min="0" step="0.01" class="form-control" name="price" placeholder="售价" />
          </div>
          <div class="col-sm-2 col-xs-4" style="width: 110px;">
              <input type="number" min="0" step="0.01" class="form-control" name="settlement" placeholder="结算价" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 col-xs-12 control-label b"> <span class="red">*</span> 库存</label>
          <div class="col-sm-2 col-xs-4" style="width: 110px;">
              <input type="number" min="0" step="1" class="form-control" name="stock" placeholder="库存" />
          </div>
        </div>
        <div style="height:90px;">
          <div class="form-group">
              <label class="col-sm-3 col-xs-12 control-label b" for="effect"> <span class="red">*</span> 有效期</label>
              <div class="col-sm-9 col-xs-12" style="margin-left:-10px;">
                  <div class="checkbox">
                    <label>
                      <input name="effect" type="checkbox" value="2" data-target="effect2" class="ace ace-checkbox-2" />
                      <span class="lbl"> 指定时段</span>
                    </label>
                    <label>
                      <input name="effect" type="checkbox" value="1" data-target="effect1" class="ace ace-checkbox-2" />
                      <span class="lbl"> 固定时长</span>
                    </label>
                  </div>
              </div>
          </div>
          <div class="form-group effect effect2" style="display:none;">
              <label class="col-sm-3 col-xs-12 control-label"> </label>
              <div class="col-sm-9 col-xs-12">
                  <label style="float:left;width:70px;margin:6px 0 0;"> 生效时间</label>
                  <input type="text" class="form-control form-input" name="date_range" id="date_range" style="float:left;width:220px;" />
              </div>
          </div>
          <div class="form-group effect effect1" style="display:none;">
              <label class="col-sm-3 control-label"> </label>
              <div class="col-sm-9">
                  <label style="float:left;width:165px;margin:6px 0 0;"> 购买当天生效，有效天数</label>
                  <input type="text" class="form-control" name="date_n" placeholder="天数" style="width:80px;" />
              </div>
          </div>
        </div>

        <h5 class="header smaller lighter pink2">营销</h5>
        <div class="form-group">
            <label class="col-sm-3 col-xs-12 control-label b" for="service"> 服务内容</label>
            <div class="col-sm-9 col-xs-12">
                <input type="text" class="form-control" name="service" placeholder="服务内容的描叙" />
                <label class="descri">例如：不限节假日,不限场次等，多个请使用英文逗号,分隔</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 col-xs-12 control-label b" for="type"> 商品特征</label>
            <div class="col-sm-9 col-xs-12" style="margin-left:-10px;">
                <div class="checkbox">
                  <label>
                    <input name="status" type="checkbox" value="1" class="ace ace-checkbox-2" />
                    <span class="lbl"> 上架</span>
                  </label>
                  <label>
                    <input name="is_recommend" type="checkbox" value="1" class="ace ace-checkbox-2" />
                    <span class="lbl"> 推荐</span>
                  </label>
                  <label>
                    <input name="is_new" type="checkbox" value="1" class="ace ace-checkbox-2" />
                    <span class="lbl"> 新品</span>
                  </label>
                  <label>
                    <input name="is_hot" type="checkbox" value="1" class="ace ace-checkbox-2" />
                    <span class="lbl"> 热销</span>
                  </label>
                </div>
            </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 col-xs-12 control-label b"> 展示</label>
          <label class="col-sm-2 control-label" style="width: 70px;"> 销量</label>
          <div class="col-sm-2" style="width: 90px;margin-left:-20px;">
              <input type="text" class="form-control" name="virtual_sales" placeholder="销量" />
          </div>
          <label class="col-sm-2 control-label" style="width: 70px;margin-left:-10px;"> 排序</label>
          <div class="col-sm-2" style="width: 90px;margin-left:-20px;">
              <input type="text" class="form-control" name="sort" placeholder="排序" />
          </div>
        </div>
      </div><!-- left 2 row end -->
    </div>

    <div class="row">
      <div class="col-md-12 sku" id="sku">
          <h5 class="header smaller lighter orange">SKU</h5>

          <div v-if="skuAttrs.length<3" class="form-group">
              <label class="col-sm-2 col-xs-12 control-label b" for="attr"> 属性规格</label>
              <div class="col-sm-10 col-xs-12" >
                <div class="input-group attr-group-input">
                    <input type="text" class="form-control add-attr-input" name="group_name" placeholder="属性名称" autocomplete="off" value="">
                    <span class="input-group-btn">
                      <button class="btn btn-light add-attr-btn" id="add-attr-btn" type="button">
                       增加属性
                      </button>
                    </span>
                </div>
              </div>
          </div>

          <div v-for="(attr,i) in skuAttrs" class="form-group" v-cloak>
              <label class="col-sm-2 col-xs-12 control-label b" for="opt"></label>
              <div class="col-sm-10 col-xs-12">
                <div class="attr-group">
                  <div class="attr-group-name">
                    <span>@{{attr.attr_name}}
                      <a v-bind:index="i" class="attr-group-delete" href="javascript:">
                        <i class="ace-icon fa fa-close red"></i></a>
                    </span>
                  </div>
                  <div class="attr-list">
                    <div class="attr-list-group">
                      <div class="input-group">
                        <input class="form-control add-attr-input" placeholder="如颜色、尺码">
                        <span class="input-group-btn">
                            <a v-bind:index="i" class="btn btn-light add-attr-btn" href="javascript:">添加规格</a>
                        </span>
                      </div>
                    </div>

                    <div v-for="(spec,j) in attr.sku_list" class="attr-item">
                        <span class="attr-name">@{{spec.spec_name}}</span>
                        <a v-bind:group-index="i" v-bind:index="j" class="attr-delete" href="javascript:">
                          <i class="ace-icon fa fa-close red"></i>
                        </a>
                    </div>

                  </div>
                </div>
              </div>
          </div>

          <div v-if="skuAttrs && skuAttrs.length>0" class="form-group" v-cloak>
              <label class="col-sm-2 col-xs-12 control-label b" for="opt">库存价格</label>
              <div class="col-sm-10 col-xs-12">
                <table class="table table-hover table-bordered table-striped">
                  <thead>
                    <tr>
                      <th v-for="(attrs,i) in skuAttrs"
                           v-if="attrs.sku_list && attrs.sku_list.length>0">
                      @{{attrs.attr_name}}
                      </th>
                      <th>库存</th>
                      <th>原价</th>
                      <th>售价</th>
                      <th>结算价</th>

                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item,index) in checkAttrs">
                      <td v-for="(attr,attr_index) in item.sku_list" class="align-middle">
                          <input type="hidden"
                                 :name="'sku['+index+'][sku_list]['+attr_index+'][spec_id]'"
                                 :value="attr.spec_id">

                          <input type="hidden" style="width: 40px"
                                 :name="'sku['+index+'][sku_list]['+attr_index+'][spec_name]'"
                                 :value="attr.spec_name">

                          <input type="hidden"
                                 :name="'sku['+index+'][sku_list]['+attr_index+'][attr_id]'"
                                 :value="attr.attr_id">

                          <input type="hidden" style="width: 40px"
                                 :name="'sku['+index+'][sku_list]['+attr_index+'][attr_name]'"
                                 :value="attr.attr_name">
                          <span>@{{attr.spec_name}}</span>
                      </td>
                      <td class="align-middle">
                          <input class="form-control" type="number" min="0" step="1" style="width: 60px"
                                 :name="'sku['+index+'][stock]'"
                                 v-model="item.stock" v-on:change="change(item,index)">
                      </td>
                      <td class="align-middle">
                          <input class="form-control" type="number" min="0" step="0.01" style="width: 70px"
                                 :name="'sku['+index+'][origin]'"
                                 v-model="item.origin" v-on:change="change(item,index)">
                      </td>
                      <td class="align-middle">
                          <input class="form-control" type="number" min="0" step="0.01" style="width: 70px"
                                 :name="'sku['+index+'][price]'"
                                 v-model="item.price" v-on:change="change(item,index)">
                      </td>
                      <td class="align-middle">
                          <input class="form-control" type="number" min="0" step="0.01" style="width: 70px"
                                 :name="'sku['+index+'][settlement]'"
                                 v-model="item.settlement" v-on:change="change(item,index)">
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
          </div>
      </div>
    </div>

  </div><!-- left end -->

  <div class="col-md-4"> <!-- right -->
    <h5 class="header smaller lighter purple">图文详情</h5>
    <div class="form-group">
        <div class="col-sm-12 col-xs-12">
          <textarea name="detail" id="detail">
          </textarea>
        </div>
    </div>
  </div>  <!-- right end -->

</div>


<div class="row">
  <div class="col-xs-12 center">
    <hr style="clear:both;" />
    <div class="form-group">
      <button type="submit" class="btn btn-primary submit">
        <i class="ace-icon fa fa-check"></i>
        <span class="">确定</span>
      </button>
      <button type="button" class="btn btn-grey cancel" style="margin-left: 10px;">
        <i class="ace-icon fa fa-close"></i>
        <span class="">取消</span>
      </button>
    </div>
  </div>
</div>

</form>
@stop

@section('javascript')
<script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.24.0/locale/zh-cn.js"></script>
<script src="//cdn.bootcss.com/bootstrap-daterangepicker/2.1.27/daterangepicker.min.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/jquery-validate/1.9.0/jquery.validate.min.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/jquery-validate/1.9.0/additional-methods.min.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/jquery-validate/1.9.0/localization/messages_cn.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="//cdn.ckeditor.com/ckeditor5/25.0.0/classic/ckeditor.js"></script>
<script src="//cdn.ckeditor.com/ckeditor5/25.0.0/classic/translations/zh-cn.js"></script>
<!--<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>-->
<script>
  var categories = {!! $categories !!};
</script>
<script src="{{ stamp('assets/js/hms-product.js') }}"></script>
<script src="{{ stamp('assets/js/hms-sku.js') }}"></script>
<script type="text/javascript">

  var page = new Vue({
      el: '#main-container',
      data:{
        skuAttrs: [],
        checkAttrs: [],
        cats: categories,
      },
      methods: {
          change: function (item, index) {
              this.checkAttrs[index] = item;
          },
      }
  });


  ClassicEditor
    .create( document.querySelector( '#detail' ), {
      language: 'zh-cn',
    } )
    .then( editor => {
    } )
    .catch( error => {
    } );


  $(function() {

  });
</script>
@stop